<template>
  <div>
    <div v-if="list && list.length > 0">
      <div class="statistic">
        累计收到价值
        <span class="cl-red">{{ totalPetRation }}g</span>
        的口粮，可供它饱餐
        <span class="cl-red">{{ totalMeal }}顿</span>
      </div>
      <div class="donate-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="donate-item"
        >
          <div class="profile">
            <img
              :src="item.userAvatar"
              alt=""
            />
            <div class="info">
              <div>{{ item.userNickname }}</div>
              <div class="time">{{ item.donateTimeStr }}</div>
            </div>
          </div>
          <div
            class="detail"
            v-html="item.donateContent"
          >
            <!-- {{ item.donateContent }} -->
          </div>
        </div>
      </div>
    </div>
    <el-empty
      v-else
      :image-size="100"
      description="暂无数据"
    ></el-empty>
    <div
      v-if="list && list.length > 0"
      class="page-wrapper"
    >
      <el-pagination
        :current-page.sync="page.current"
        :page-sizes="[10, 20]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        class="pagination"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getDonateByPet } from '@/api/core/pet-file';
// import { replaceTemplate } from '@/util';

export default {
  name: 'DonateTab',
  props: {
    id: {
      type: [Object, String],
      status: { type: String },
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      feedDetail: '',
      totalMeal: 0,
      totalPetRation: 0,
      page: {
        size: 10,
        current: 1,
      },
      list: [],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getDonateByPet();
        }
      },
    },
  },
  methods: {
    sizeChange(size) {
      this.page.size = size;
      this.getDonateByPet();
    },
    currentChange(current) {
      this.page.current = current;
      this.getDonateByPet();
    },

    getDonateByPet() {
      getDonateByPet({
        petId: this.id,
        donateType: this.type,
        ...this.page,
      }).then((res) => {
        if (res.data.data) {
          this.totalMeal = res.data.data.totalMeal;
          this.totalPetRation = res.data.data.totalPetRation;
          this.page.total = res.data.data.total;
          this.list = res.data.data.records.map((item) => {
            var contentList = '';
            item.skuList.map((item) => {
              if (item.feedingInfo) {
                contentList = JSON.parse(item.feedingInfo);
              }
            });
            if (contentList !== '') {
              this.feedDetail =
                contentList.totalFeedQty + contentList.goodsUnit;
            }
            item.donateContent = item.donateContent.replace(
              /\$\{(\w+)\}/,
              this.feedDetail +
                `<span style='color:#409eff'>
                  ${item.skuList.map((item) => item.goodsName).join('，')}
                </span>`
            );
            return item;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statistic {
  background: #eeeeee;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
  .cl-red {
    color: red;
  }
}
.donate-list {
  margin: 20px 0;
  .donate-item {
    display: flex;
    align-items: center;
    + .donate-item {
      margin-top: 10px;
    }
    .profile {
      display: flex;
      img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
      }
      .info {
        margin-left: 5px;
        font-size: 14px;
        .time {
          color: #999999;
        }
      }
    }
    .detail {
      margin-left: 30px;
      flex: 1;
    }
  }
}
</style>
